import Taro, {FC, useEffect, useState, useCallback, useRef} from '@tarojs/taro'
import {View, Text, Image, Input, Form} from '@tarojs/components'
import './index.scss'
import loveLornUser from '../../api/lovelorn-user'

const labelColor = ['#989FEF', '#FE85CC', '#6CD0FF', '#FFBC67', '#71D8C0']

const MyLabel: FC = () => {
  const [labelList, setLabelList] = useState([])
  const [tagName, setTagName] = useState('')
  const inputDom = useRef(null)
  const [hasClick, setHasClick] = useState(false)
  const resetForm = () => {
    console.log('清空form')
  }
  const confirmAdd = useCallback(
    e => {
      if (e.detail.value) {
        setLabelList([...labelList, e.detail.value])
        setTagName('')
        setHasClick(false)
      } else {
        Taro.showToast({
          title: '标签不能为空',
          icon: 'none',
        })
      }
    },
    [labelList],
  )
  const getLabel = async () => {
    try {
      let res = await loveLornUser.userLabelInfos.listPage()
      setLabelList(() => {
        return res.map(el => {
          return el.labelName
        })
      })
    } catch (ex) {
      console.log(ex, 'ex')
    }
  }
  const submitInfo = async () => {
    try {
      let res = await loveLornUser.userLabelInfos.batchSave(labelList)
      console.log(res, 'res')
      Taro.showToast({
        title: '标签保存成功',
        icon: 'none',
        success: function() {},
      })
    } catch (ex) {
      console.log(ex, 'ex')
    }
  }
  const removeItem = useCallback(
    (e, index) => {
      labelList.splice(index, 1)
      console.log(labelList, 'labelList')
      setLabelList([...labelList])
    },
    [labelList],
  )
  const changeInput = () => {
    setHasClick(!hasClick)
  }
  useEffect(() => {
    Taro.onWindowResize(windowSize => {
      console.log(windowSize)
    })
    return () => {
      Taro.offWindowResize(res => {
        console.log(res)
      })
    }
  }, [])

  useEffect(() => {
    getLabel()
  }, [])
  return (
    <View className="myLabelPage">
      <View>
        {labelList.length && (
          <View className="exitTag">
            <View className="exitTitle">已定义标签</View>
            <View className="tagListWrap flex">
              {labelList.map((el, index) => {
                return (
                  <View
                    className="tagList"
                    key={`index${index}`}
                    onClick={() => {
                      removeItem(el, index)
                    }}>
                    <Text className="tagInner" style={{background: `${labelColor[index]}`}}>
                      {el}
                    </Text>
                    <Text className=" circle">
                      <Text className="iconfont iconpublish-cancel"></Text>
                    </Text>
                  </View>
                )
              })}
            </View>
          </View>
        )}
        <View className="customBtn" onClick={changeInput}>
          <Text className="iconpush-o iconfont"></Text>
          自定义标签
        </View>
        <View className="tagTips">你可以自定义标签，最多可定义10个标签</View>
        <View className="submitBtn" onClick={submitInfo}>
          提交
        </View>
      </View>

      <View className={hasClick ? 'customWrap show' : ' customWrap hide'}>
        <Form onReset={resetForm}>
          <Input
            className="userInput"
            value={tagName}
            confirmType="send"
            // adjustPosition={false}
            onInput={e => {
              setTagName(e.detail.value)
            }}
            placeholder="标签最多8个字哦~"
            onConfirm={confirmAdd}
          />
        </Form>
      </View>
    </View>
  )
}

export default MyLabel
